<!DOCTYPE html>


<html lang="zh-CN,en,default">
  

    <head>
      <meta charset="utf-8" />
       
      <meta name="keywords" content="阳小良,个人博客,程序猿,插画师,技术博客,人生感悟" />
       
      <meta name="description" content="不想做插画师的程序猿，不是好厨师" />
      
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1"
      />
      <title>零基础-搭建个人博客5-资源存储 |  阳小良</title>
  <meta name="generator" content="hexo-theme-ayer">
      
      <link rel="shortcut icon" href="/favicon.ico" />
       
<link rel="stylesheet" href="/dist/main.css">

      
<link rel="stylesheet" href="/css/fonts/remixicon.css">

      
<link rel="stylesheet" href="/css/custom.css">
 
      <script src="https://cdn.staticfile.org/pace/1.2.4/pace.min.js"></script>
       
 

      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-bulma@5.0.1/bulma.min.css"
      />
      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.js"></script>

      <!-- mermaid -->
      
      <style>
        .swal2-styled.swal2-confirm {
          font-size: 1.6rem;
        }
      </style>
    </head>
  </html>
</html>


<body>
  <div id="app">
    
      
    <main class="content on">
      <section class="outer">
  <article
  id="post-tech/createBlogs/零基础-搭建个人博客5-资源存储"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  零基础-搭建个人博客5-资源存储
</h1>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2025/01/17/tech/createBlogs/%E9%9B%B6%E5%9F%BA%E7%A1%80-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A25-%E8%B5%84%E6%BA%90%E5%AD%98%E5%82%A8/" class="article-date">
  <time datetime="2025-01-17T15:13:14.000Z" itemprop="datePublished">2025-01-17</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/%E8%B0%8B%E7%94%9F%E6%89%8B%E6%AE%B5/">谋生手段</a> / <a class="article-category-link" href="/categories/%E8%B0%8B%E7%94%9F%E6%89%8B%E6%AE%B5/%E9%9B%B6%E5%9F%BA%E7%A1%80/">零基础</a> / <a class="article-category-link" href="/categories/%E8%B0%8B%E7%94%9F%E6%89%8B%E6%AE%B5/%E9%9B%B6%E5%9F%BA%E7%A1%80/%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/">搭建个人博客</a>
  </div>
  
<div class="word_count">
    <span class="post-time">
        <span class="post-meta-item-icon">
            <i class="ri-quill-pen-line"></i>
            <span class="post-meta-item-text"> 字数统计:</span>
            <span class="post-count">2.1k</span>
        </span>
    </span>

    <span class="post-time">
        &nbsp; | &nbsp;
        <span class="post-meta-item-icon">
            <i class="ri-book-open-line"></i>
            <span class="post-meta-item-text"> 阅读时长≈</span>
            <span class="post-count">7 分钟</span>
        </span>
    </span>
</div>
 
    </div>
      
    <div class="tocbot"></div>




  
    <div class="article-entry" itemprop="articleBody">
       
  <h2 id="本篇目的"><a href="#本篇目的" class="headerlink" title="本篇目的"></a>本篇目的</h2><blockquote>
<p>由于部分资源文件占用带宽较大，如果使用海外的网站可能会进一步拖累网站的运行速度，所以需要寻找一个可以在国内使用，且尽量减少花销的资源存储方案。</p>
</blockquote>
<h2 id="图片存储选择："><a href="#图片存储选择：" class="headerlink" title="图片存储选择："></a>图片存储选择：</h2><h3 id="1-github："><a href="#1-github：" class="headerlink" title="1.github："></a>1.github：</h3><h4 id="github仓库："><a href="#github仓库：" class="headerlink" title="github仓库："></a>github仓库：</h4><blockquote>
<p>可以将图片直接放置到自己博客对应的服务目录下面，这样的好处是不需要额外管理图片；随着服务的部署和迭代自动存储；不需要自己去寻找额外的存储服务商；</p>
<p>当然，除了好处还有坏处：</p>
<blockquote>
<ol>
<li>github的仓库有容量限制，单一仓库容量限制为1G，单个文件不能超过100M，账号的整体存储上线为100G；</li>
<li>部署花费的时长不能超过10分钟；理论上咱们的博客不会有这个限制；</li>
<li>github pages站点的软带宽限制是每个月100G；</li>
</ol>
</blockquote>
<p>所以，我们可以看到，如果随着你图片的不断上传，你的博客仓库会受到仓库大小的限制，而且由于你在使用软带宽，所以整体的流量也会收到影响。</p>
<p>当然针对这两个问题，重点是第一个，仓库大小，软带宽每个月100G理论上来说是足够我们使用的。</p>
<p>所以，问题变为怎么解决仓库大小限制问题；这里我经过多方探索，本着将github榨干的原则，我找到了一款github app名为：picx</p>
<p>picx非常适合我们的场景，他是使用github作为免费的图床，进行图片的上传和存储。</p>
<blockquote>
<p>图床地址： <a target="_blank" rel="noopener" href="https://picx-docs.xpoet.cn/">https://picx-docs.xpoet.cn/</a></p>
</blockquote>
<p>picx的具体使用文档我这里就不赘述了，简单说一下他的基本原理，picx是将github的存储作为底层服务，然后依托于github的api，将仓库管理和推送等进行封装，这样用户便可以在picx进行图片的存储和处理操作，然后通过github的api上传数据，并返回可访问的对公url。</p>
<p>此时，您将获取的url放到您的博客文档即可，这样您博客的内容基本上都是文字，1G的存储空间绝对是够用的。</p>
</blockquote>
<h3 id="2-云服务商："><a href="#2-云服务商：" class="headerlink" title="2.云服务商："></a>2.云服务商：</h3><blockquote>
<p>虽然可以通过上述的方式解决github本身的容量限制问题；但是长期来看依然是有一定上限的；另外，因为还是github的资源链接，所以国内访问还是需要想办法进行调整和转换，这部分可以看一下我上一篇讲的资源部署和最后说的域名解析部分的内容。</p>
<p>1.腾讯云<br>新用户可以使用六个月的免费存储容量、免费请求和免费流量<br>限制：时间、流量、空间大小均有限制</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://cloud.tencent.com/">https://cloud.tencent.com/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>2.阿里云OSS<br>海量、安全、低成本、高可靠的云存储服务，提供99.999999999%的数据可靠性。使用RESTful API 可以在互联网任何位置存储和访问，容量和处理能力弹性扩展，多种存储类型供选择全面优化存储成本。<br>不一定存储图片，文件也是ok的，不过以前扣量很严重，现在好多了，目前再用。</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.aliyun.com/">https://www.aliyun.com/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>3.七牛云<br>国内云厂商服务器基本上是需要花钱的，目前我自己的使用的是七牛云，因为我是七牛云初创时间段注册使用的，当时冲10块钱有个终身的会员额度，不知道现在注册充值还有没有，至于额度的用量，目前就我个人来看，存储和带宽都足够我博客的使用了。</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.qiniu.com/">https://www.qiniu.com/</a></p>
</blockquote>
<p>图床这部分，我个人建议还是花一点钱，使用一个相对稳定的云服务厂商，如果完全不花钱，后续很有可能图床倒闭，你所有的博客都需要重新调整，那个代价是很大的。</p>
<p>PS：这部分有个点，如果是国内的图床，你的域名都是需要经过备案的，如果域名备案后解析地址不是对应的云厂商，可能会有被限制访问的风险。</p>
<p>当然，如果确实是资金有限，那就按照我上面说的，用github作为图床服务商，github目前看还是比较靠谱的，而且维护起来也容易。然后自己搞域名，再找解析处理。</p>
</blockquote>
<h3 id="3-其他图床服务："><a href="#3-其他图床服务：" class="headerlink" title="3.其他图床服务："></a>3.其他图床服务：</h3><blockquote>
<p>1.全球 CDN 免费图床 (IMG.TG)： </p>
<p>图片大小限制为5MB。存储容量不限，每月限制500张，时不时会维护 </p>
<blockquote>
<p>改为收费：<a target="_blank" rel="noopener" href="https://imgtg.com/">https://imgtg.com/</a> </p>
<p>附带免费：<a target="_blank" rel="noopener" href="https://img.tg/">https://img.tg/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>2.聚合图床 </p>
<p>免费无限图片上传：</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.superbed.cn/">https://www.superbed.cn/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>3.Z4A图床：</p>
<p>最大64MB 图片大小. 直接的源图片链接，储存图片超过2000张（暂定）的用户，商业用户需进行赞助。</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.z4a.net/">https://www.z4a.net/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>4.imagehub：</p>
<p>支持单张最大10MB图片上传全球CDN加速，多地数据实时备份。</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.imagehub.cc/">https://www.imagehub.cc/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>5.helloimg：</p>
<p>最大 20 MB 图片大小. 直接的源图片，这个很好用但是每个小时限10张，每天好像限制100，速度很快，需要注册，实名是跳转到腾讯云人脸，我也一直在用的。</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.helloimg.com/">https://www.helloimg.com/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>6.路过图床：</p>
<p>老牌图床了，从2011年就开始向大家开放，提供高速稳定的图片上传和外链分享服务，最大单张图片支持10MB，提供全球CDN加速、支持外链、 原图保存、无需注册。官方承诺，全站启用SSL加密链接，保障您的信息安全，不会删除图片, 即使是多年无任何流量的图片也不会删除。说是这么说，但是有些敏感图片照样删</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://imgse.com/">https://imgse.com/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>7.SM.MS图床:</p>
<p>土豪兽兽建的图床，2015 年开始正式运营。速度：现在估计是被滥用了没那么快了 烧风购买了更多节点、修改了服务架构，现在全球速度还是不错的。CDN：烧风自建的 CDN，有香港阿里云、DigitalOcean 欧洲和 Linode 北美等节点 HTTPS：HTTP 会被 301 跳转 HTTPS（支持 HTTP2）<br>支持 API 操作，图片存储非常可靠，V2EX 钦点的图床。iOS 和 Android 应用 即将开发完毕已经分别上架 iTunes 和 Play Store，甚至有第三方做的 Telegram Bot</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://sm.ms/">https://sm.ms/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>8.即刻图床 : </p>
<p>大厂全球CDN加速,支持外链,不限流量,支持粘贴上传、拖放上传</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://jiketuchuang.com/">https://jiketuchuang.com/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>9.图片映客–水墨图床:</p>
<p>免费的高速外链图床-免费高速图床-致力于创建一流的图片加速空间 最大可上传 50.00 MB 的图片 单次同时可选择 50 张 注册登陆后自主管理</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://img.ink/">https://img.ink/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>10.图几度图床:</p>
<p>存储图片：我们是认真的,无需登陆即可上传 单个文件支持最大 3 M 每次最多允许 5 张图片上传</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://img.tujidu.com/">https://img.tujidu.com/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>11.PostImage：</p>
<p>速度：国外速度杠杠的，国内别被墙就好 CDN：AdvancedHosted CDN ；HTTPS：支持<br>PostImage 图床的介绍说是为了方便用户在 Facebook 和 Twitter 上传图。这个图床用的 CDN 服务商不太有名</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://postimages.org/">https://postimages.org/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>12.ImgBox ：</p>
<p>实在不敢恭维，估计只有在北美地区的访客才能保证最快的速度 CDN：两台位于美国的 Leaseweb 的服务器 HTTPS：支持 上传地址 虽然用的服务器挺一般，但是毕竟也是一家国外老牌图床了。自 2010 年起开始运营以来，已经托管了上百万张图片，看起来还是令人放心的。</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://imgbox.com/">https://imgbox.com/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>13.小贱贱图床：<br>速度：一般般~获取一个简单的外链，图床用的是微博空间，速度很快，但是图片清晰度会变低。每日可以上传图片20张</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://pic.xiaojianjian.net/">https://pic.xiaojianjian.net/</a></p>
</blockquote>
</blockquote>
<blockquote>
<p>14.Imgbb（付费）：</p>
<p>任意拖放图片到这里, 即开始上传您的图片. 最大 32 MB 图片大小. 直接的源图片链接, BBCode代码和HTML缩略图显示</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://zh-cn.imgbb.com/">https://zh-cn.imgbb.com/</a></p>
</blockquote>
<p>以下比较推荐，虽然付费，但是不担心跑路，新用户可以白嫖几个月；</p>
<p>以上图床推荐来自：<a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/58863378">https://zhuanlan.zhihu.com/p/58863378</a></p>
</blockquote>
 
      <!-- reward -->
      
      <div id="reword-out">
        <div id="reward-btn">
          打赏
        </div>
      </div>
      
    </div>
    

    <!-- copyright -->
    
    <div class="declare">
      <ul class="post-copyright">
        <li>
          <i class="ri-copyright-line"></i>
          <strong>版权声明： </strong>
          
          本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
          
        </li>
      </ul>
    </div>
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/hexo/" rel="tag">hexo</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E8%B0%8B%E7%94%9F%E6%89%8B%E6%AE%B5/" rel="tag">谋生手段</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E9%9B%B6%E5%9F%BA%E7%A1%80/" rel="tag">零基础</a></li></ul>

    </footer>
  </div>

   
  <nav class="article-nav">
    
      <a href="/2025/01/18/tech/createBlogs/%E9%9B%B6%E5%9F%BA%E7%A1%80-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A26-%E7%BC%96%E8%BE%91%E5%99%A8%E6%8E%A8%E8%8D%90/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            零基础-搭建个人博客6-编辑器
          
        </div>
      </a>
    
    
      <a href="/2025/01/16/tech/createBlogs/%E9%9B%B6%E5%9F%BA%E7%A1%80-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A24-%E9%83%A8%E7%BD%B2%E5%88%B0github%E4%B8%8A/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">零基础-搭建个人博客4-部署到github上</div>
      </a>
    
  </nav>

  
   
     
</article>

</section>
      <footer class="footer">
  <div class="outer">
    <ul>
      <li>
        Copyrights &copy;
        2011-2025
        <i class="ri-heart-fill heart_icon"></i> 阿良
      </li>
    </ul>
    <ul>
      <li>
        
      </li>
    </ul>
    <ul>
      <li>
        
        
        <span>
  <span><i class="ri-user-3-fill"></i>访问人数:<span id="busuanzi_value_site_uv"></span></span>
  <span class="division">|</span>
  <span><i class="ri-eye-fill"></i>浏览次数:<span id="busuanzi_value_page_pv"></span></span>
</span>
        
      </li>
    </ul>
    <ul>
      
        <li>
          <a href="https://beian.miit.gov.cn/" target="_black" rel="nofollow">京ICP备14051636号-6</a>
        </li>
        
    </ul>
    <ul>
      
    </ul>
    <ul>
      <li>
        <!-- cnzz统计 -->
        
      </li>
    </ul>
  </div>
</footer>    
    </main>
    <div class="float_btns">
      <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>

<div class="todark" id="todark">
  <i class="ri-moon-line"></i>
</div>

    </div>
    <aside class="sidebar on">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/"><img src="/images/ayer-side.svg" alt="阳小良"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories/">分类</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/">标签</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories/%E5%8E%9F%E8%91%97/">原著</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories/%E4%BA%94%E5%91%B3%E6%9D%82%E9%99%88/%E5%A4%A9%E6%B6%AF%E6%B5%B7%E8%A7%92/">旅行</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories/%E8%B0%8B%E7%94%9F%E6%89%8B%E6%AE%B5/">技术</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories/%E6%8A%95%E8%B5%84%E8%87%AA%E5%B7%B1/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">读书</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" target="_blank" rel="noopener" href="https://hi.huitu.com/1145549/">摄影</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" target="_blank" rel="noopener" href="https://space.bilibili.com/3546831053129882/channel/seriesdetail?sid=4562367&ctype=0">画廊</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/friends">友链</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/2011/02/14/about">关于我</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="搜索">
        <i class="ri-search-line"></i>
      </a>
      
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/images/alipay.jpg">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/images/wechat.jpg">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
    
<script src="/js/jquery-3.6.0.min.js"></script>
 
<script src="/js/lazyload.min.js"></script>

<!-- Tocbot -->
 
<script src="/js/tocbot.min.js"></script>

<script>
  tocbot.init({
    tocSelector: ".tocbot",
    contentSelector: ".article-entry",
    headingSelector: "h1, h2, h3, h4, h5, h6",
    hasInnerContainers: true,
    scrollSmooth: true,
    scrollContainer: "main",
    positionFixedSelector: ".tocbot",
    positionFixedClass: "is-position-fixed",
    fixedSidebarOffset: "auto",
  });
</script>

<script src="https://cdn.staticfile.org/jquery-modal/0.9.2/jquery.modal.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.staticfile.org/jquery-modal/0.9.2/jquery.modal.min.css"
/>
<script src="https://cdn.staticfile.org/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js"></script>

<script src="/dist/main.js"></script>

<!-- ImageViewer -->
 <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.staticfile.org/photoswipe/4.1.3/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/photoswipe/4.1.3/default-skin/default-skin.min.css">
<script src="https://cdn.staticfile.org/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="https://cdn.staticfile.org/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script> 
<!-- MathJax -->

<!-- Katex -->

<!-- busuanzi  -->
 
<script src="/js/busuanzi-2.3.pure.min.js"></script>
 
<!-- ClickLove -->

<!-- ClickBoom1 -->

<!-- ClickBoom2 -->

<!-- CodeCopy -->

<!-- CanvasBackground -->

<script>
  if (window.mermaid) {
    mermaid.initialize({ theme: "forest" });
  }
</script>


    
    

  </div>
</body>

</html>